<template>
  <component :is="componentName" :rectangle="rectangle"></component>
</template>

<script>
  import LeafletContainer from "./LeafletContainer";
  import CesiumContainer from "./CesiumContainer";
  import {eventBus,Gisevevts} from '../../src/script/events'

  export default {
    name: "Map",
    props: {
      // componentName: String,
    },
    data() {
      return {
        componentName:'CesiumContainer',
        rectangle:null
      }
    },
    components: {
      LeafletContainer,
      CesiumContainer
    },
    mounted() {
      eventBus.$on(Gisevevts["handlerMapFrameSwitch"], (e) => {
        this.rectangle = e;
        this.componentName = this.componentName === 'CesiumContainer' ? ('LeafletContainer') : ('CesiumContainer');
      });
    },
    methods:{

    }
  }
</script>

<style scoped>

</style>
